div#main {
    width: 650px;
    height: 650px;
    background: url("bgd.png");
    background-repeat: no-repeat;
    z-index: 0;
    position: absolute;
    top: 5px;
    left: 55px;
}

#usrPanel {
    position: absolute;
    top: 12px;
    left: 15px;
    width: 80px;
    height: 450px;
    padding: 5px;
    .overflow;
    .con;
    .border;
}

#sysUsr{
    position: relative;
    margin: 5px 0 0 0;
    width: 65px;
    height: 20px;
}

#usrBox{
    position: relative;
    margin: 10px 0 0 0;
    width: 65px;
    height: 395px;
}

#msgPanel {
    position: absolute;
    top: 12px;
    left: 116px;
    width: 500px;
    height: 450px;
    padding: 5px;
    .con;
    .border;
}

#usrLst {
    list-style: none;
    margin: 0 0 0 -30px;
}

.user {
    height: 30px;
    margin: 0;
    cursor: pointer;
}

.user:hover {
    background: grey;
}

.msgBox {
    .con;
    width: 498px;
    height: 448px;
    .overflow;
}

#inputState {
    position: absolute;
    top: 483px;
    left: 15px;
    padding: 5px;
    width: 600px;
    height: 30px;
    .con;
    .border;
}

#inputState>p {
    margin-top: 3px;
}

#inputState>p>label {
    width: 60px;
    height: 20px;
    border: solid 2px black;
    margin-left: 5px;
}

#inputState>p>input {
    margin-left: 5px;
}

#inputState>p>span {
    margin-left: 50px;
}

#inputState>p>input[name="imgBtn"] {
    width: 50px;
    height: 25px;
    .con;
}

#inputBox {
    position: absolute;
    top: 534px;
    left: 15px;
    padding: 5px;
    width: 600px;
    height: 90px;
    line-height: 40px;
    .con;
    .border;
}

#inputBox>p {
    height: 90px;
    margin-top: -2px;
}

#inputBox>p>span:nth-of-type(2) {
    position: absolute;
    top: 4px;
    right: 10px;
}

#msgInput {
    width: 470px;
    height: 90px;
    .overflow;
    .con;
    .border;
}

.btnDefault{
    width: 90px;
    height: 90px;
    .border;
    border-radius: 5px;
    font: 20px bold YaHei;
    .con;
}

#sndBtn {
    display: none;
    .btnDefault;
}

#logBtn {
    display: block;
    .btnDefault;
}

#sendImage {
    display: none;
    .btnDefault;
}


.con{ 
  background:rgba(255, 255, 255, 0.3) none repeat scroll 0 0 !important;
  filter:Alpha(opacity=30); background:#fff;
}

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid #fcb908;
  border-radius: 0.2rem;
  background-color: #f7bc0a;

  &:after {
    content: '';
    width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
    width: 0px;
    height: 0px;
    border-color: transparent transparent #fcb908 transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

.border {
    border: solid 5px;
    border-color:  transparent;
}

.overflow { overflow-x: hidden; overflow-y: auto; }